/* 自定义文字排版模式 writing-mode
 * REF [writing-mode - CSS（层叠样式表） | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/writing-mode)
 * horizontal-tb：(默认)对于左对齐(ltr)文本，内容从左到右水平流动。对于右对齐(rtr)文本，内容从右到左水平流动。下一水平行位于上一行下方。
 * vertical-rl：对于左对齐(ltr)文本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐(rtr)文本，内容从下到上垂直流动，下一垂直行位于上一行右侧。
 * vertical-lr：对于左对齐(ltr)文本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐(rtr)文本，内容从下到上垂直流动，下一垂直行位于上一行左侧。
 * sideways-rl：对于左对齐(ltr)文本，内容从下到上垂直流动。对于右对齐(rtr)文本，内容从上到下垂直流动。所有字形（即使是垂直文本中的字形）都朝向右侧。 (默认样式顺时针旋转 90°)
 * sideways-lr：对于左对齐(ltr)文本，内容从上到下垂直流动。对于右对齐(rtr)文本，内容从下到上垂直流动。所有字形（即使是垂直文本中的字形）都朝向左侧。 (默认样式逆时针旋转 90°)
 */


.writing-mode(@mode) {
    [custom-writing-mode="@{mode}"] {
        writing-mode: @mode;
    }

}

// 导出为图片
.b3-dialog__content,
.protyle-content {
    .writing-mode(horizontal-tb);
    .writing-mode(vertical-rl);
    .writing-mode(vertical-lr);

    // 仅 Firefox 支持
    .writing-mode(sideways-rl);
    .writing-mode(sideways-lr);
}
